Tích hợp giải pháp Single Sign-On (SSO) thông qua Auth0 vào ứng dụng ReactJS là một bước tiến lớn, mang lại trải nghiệm đăng nhập mượt mà và chuyên nghiệp không kém gì các tập đoàn công nghệ lớn. Lúc code trên localhost, mọi thứ thường hoạt động rất hoàn hảo. Thế nhưng, khoảnh khắc đưa dự án (Deploy) lên Vercel, hàng tá lỗi màu đỏ rực trong tab Console bắt đầu xuất hiện.

Bài blog này chính là cuốn "cẩm nang cấp cứu" giúp bạn bắt chuẩn bệnh và xử lý triệt để những lỗi phổ biến nhất khi kết hợp bộ đôi ReactJS (Vite/CRA) + Auth0 + Vercel.

1. Vấn đề: Lỗi Cross-Origin và mất trạng thái đăng nhập khi F5 (Reload)

Biểu hiện:

Người dùng đăng nhập thành công, sử dụng app bình thường. Nhưng chỉ cần ấn F5 (tải lại trang) hoặc mở app ở một tab mới, họ lập tức bị văng ra ngoài (Log out) và phải đăng nhập lại. Mở F12 lên, bạn thấy các lỗi liên quan đến Cross-Origin, CORS policy, hoặc login_required.

Nguyên nhân gốc rễ:

Mặc định, thư viện @auth0/auth0-react lưu trữ Token trong bộ nhớ tạm (Memory). Khi bạn F5, bộ nhớ này bị xóa. Để khôi phục trạng thái, Auth0 sẽ ngầm mở một iframe (Silent Authentication) để xin lại token từ server Auth0. Tuy nhiên, trên môi trường Production, các trình duyệt hiện đại (như Safari, Chrome, Brave) chặn rất gắt gao việc chia sẻ cookie qua bên thứ 3 (Third-party cookies), cộng với việc cấu hình CORS trên Dashboard Auth0 chưa chuẩn xác, dẫn đến quá trình cấp lại token bị thất bại.

Cách khắc phục:

Bước 1: Chuyển vị trí lưu trữ Cache sang Local Storage

Bạn cần thay đổi cấu hình mặc định của Auth0Provider để cho phép lưu token vào Local Storage thay vì Memory. Điều này giúp duy trì phiên đăng nhập ngay cả khi người dùng tải lại trang.

import { Auth0Provider } from '@auth0/auth0-react';

<Auth0Provider
  domain={process.env.VITE_AUTH0_DOMAIN}
  clientId={process.env.VITE_AUTH0_CLIENT_ID}
  authorizationParams={{
    redirect_uri: window.location.origin
  }}
  // Thêm dòng cực kỳ quan trọng này:
  cacheLocation="localstorage"
>
  <App />
</Auth0Provider>

Bước 2: Bổ sung Domain của Vercel vào Auth0 Dashboard

Đừng quên truy cập trang quản trị Auth0 > Applications > Chọn App của bạn. Kéo xuống phần cài đặt URI và thêm chính xác domain Vercel của bạn (ví dụ: [https://my-awesome-app.vercel.app](https://my-awesome-app.vercel.app)) vào các ô sau:

  • Allowed Callback URLs

  • Allowed Logout URLs

  • Allowed Web Origins (Bắt buộc phải có để sửa lỗi Cross-Origin)

  • Allowed Origins (CORS) (Bắt buộc)

2. "Bẫy" cấu hình biến môi trường (Environment Variables) trên Vercel

Biểu hiện:

Ứng dụng build thành công trên Vercel nhưng màn hình trắng bóc, hoặc nút Đăng nhập bấm vào không có phản hồi.

Nguyên nhân gốc rễ:

Các thông tin nhạy cảm như Domain và Client ID của Auth0 thường được lưu trong file .env ở dưới máy tính cá nhân (localhost). Tuy nhiên, file .env này luôn bị đưa vào .gitignore và không bao giờ được đẩy lên Github. Do đó, khi Vercel kéo code về build, nó hoàn toàn không biết các biến này là gì, dẫn đến giá trị bị undefined.

Cách khắc phục:

  1. Đăng nhập vào Dashboard của Vercel.

  2. Chọn Project của bạn > Chuyển sang tab Settings > Chọn Environment Variables.

  3. Thêm thủ công từng biến môi trường đã có trong file .env local của bạn.

    • Lưu ý quan trọng: Hãy chú ý đến tiền tố (prefix) của biến. Nếu bạn dùng Create React App, biến phải bắt đầu bằng REACT_APP_ (ví dụ: REACT_APP_AUTH0_DOMAIN). Nếu dùng Vite, biến phải bắt đầu bằng VITE_ (ví dụ: VITE_AUTH0_DOMAIN).

  4. Sau khi thêm xong, bạn bắt buộc phải Redeploy lại dự án (Vào tab Deployments > Dấu 3 chấm > Redeploy) để Vercel nạp các biến này vào bản build mới nhất.

3. Bảo mật Social Connections (Google, Facebook) trên môi trường Production

Biểu hiện:

Tính năng "Đăng nhập bằng Google/Facebook" chạy ngon ơ trên localhost. Nhưng khi lên Vercel, người dùng thấy một trang cảnh báo màu cam to đùng từ Auth0 báo rằng: "You are using Auth0 developer keys..." hoặc tệ hơn là chức năng này hoàn toàn tê liệt.

Nguyên nhân gốc rễ:

Để giúp bạn code nhanh gọn lẹ, Auth0 cung cấp sẵn các "Developer Keys" (Mã khóa chạy thử) cho chức năng Social Login. Tuy nhiên, các khóa này chỉ được phép hoạt động trên localhost. Khi ứng dụng nhận diện domain thay đổi sang Production (Vercel), nó sẽ chặn ngay lập tức vì lý do bảo mật.

Cách khắc phục:

Đã đến lúc bạn phải khai báo ứng dụng của mình như một thực thể danh chính ngôn thuận với Google và Facebook:

  1. Với Google: Truy cập Google Cloud Console, tạo một Project mới. Thiết lập màn hình OAuth Consent Screen, sau đó tạo Credentials loại OAuth client ID (chọn Web application).

  2. Với Facebook: Truy cập Meta for Developers, tạo một App mới và thiết lập tính năng Facebook Login.

  3. Cấu hình lại Auth0:

    • Lấy Client ID và Client Secret thật từ Google/Facebook mà bạn vừa tạo.

    • Quay lại Auth0 Dashboard > Authentication > Social.

    • Bấm vào kết nối Google/Facebook tương ứng và thay thế các Test Key bằng bộ Key thật của bạn.

    • Đừng quên chèn các URL Callback mà Auth0 cung cấp vào cấu hình trên Google Cloud và Facebook App.

Lời kết

Việc đưa một ứng dụng Fullstack có tích hợp xác thực từ môi trường Localhost lên Production luôn là một bài test "thử lửa" đối với mọi lập trình viên Front-End. Bằng cách nắm vững luồng hoạt động của CORS, cách quản lý Cache Location và kiểm soát tốt các biến môi trường, bạn sẽ hoàn toàn làm chủ được ứng dụng của mình.

Hãy lưu lại bài viết này như một cuốn cẩm nang bỏ túi, và đừng quên kiểm tra kỹ các checklist trên mỗi khi bạn thực hiện quy trình Deploy nhé! Chúc các bạn code vui và không còn sợ màn hình đỏ lỗi!